<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>添加用户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
  <div class="layui-form" lay-filter="sys-user-form" id="sys-user-form"  style="padding: 20px 0 0 0;">
    <input type="hidden" id="avatar" name="avatar">
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-input-inline layui-upload">
        <button type="button" class="layui-btn" id="upload-btn">上传图片</button>
        <div class="layui-upload-list">
          <img class="layui-upload-img" id="upload-img" width="100px" height="100px">
          <p id="upload-text"></p>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">账号</label>
      <div class="layui-input-inline">
        <input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="password" name="passWord" lay-verify="required" placeholder="请输入密码" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机号码</label>
      <div class="layui-input-inline">
        <input type="text" name="phonenumber" lay-verify="required" placeholder="请输入手机号码" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="required" placeholder="请输入用户邮箱" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" lay-filter="sex">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block" id="enabled"></div>
    </div>
    <div class="layui-form-item" lay-filter="sex">
      <label class="layui-form-label">选择性别</label>
      <div class="layui-input-block" id="sex"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark" placeholder="请输入备注" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <div id="roleName" class="xm-select-demo"></div>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
    </div>
  </div>

  <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
  <script th:inline="javascript">
  var ctx = [[${#request.getContextPath()}]];
  layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
     index: 'lib/index', //主入口模块
     xmSelect: 'xm-select'
  }).use(['index', 'form','xmSelect','upload','crud'], function(){
    let $ = layui.$
        ,xmSelect = layui.xmSelect
        ,upload = layui.upload
        ,crud = layui.crud
      ,form = layui.form;
      form.on('submit(save-submit)', function(data) {
          let roleIds = crud.getXmSelectTreeIds(select);
          data.field.roleIds = roleIds;
          $.ajax({
              type: 'POST',
              url:  ctx + '/sysUser/add',
              data: JSON.stringify(data.field),
              contentType:'application/json;charset=UTF-8',
              dataType: 'json',
              success: function(result) {
                  layer.msg(result.message);
                  if (result.code === 200) {
                      let index = parent.layer.getFrameIndex(window.name);
                      // 关闭
                      parent.layer.close(index);
                      // 刷新
                      parent.location.reload();
                  }
              }
          });
      });

      let select = xmSelect.render({
          el: '#roleName',
          tips:"选择角色",
          filterable: true,
          tree: {
            //是否显示树状结构
            show: true,
            //是否展示三角图标
            showFolderIcon: true,
            //是否显示虚线
            showLine: true,
            //间距
            indent: 20,
            //默认展开节点的数组, 为 true 时, 展开所有节点
            expandedKeys: [ -3 ],
            //是否严格遵守父子模式
            strict: false,
            //是否开启极简模式
            simple: false,
            //点击节点是否展开
            clickExpand: true,
            //点击节点是否选中
            clickCheck: true
          },
          toolbar: {
            show: false
          },
          height: 'auto',
          data: [],
          //分页
          paging: true,
          //每页条数
          pageSize: 10,
      });

      $.ajax({
          type: 'get',
          url: ctx + '/sysRole/xmSelect',
          success: function(res) {
              select.update({
                  data: res
              })
          }
      });

      //普通图片上传
      let uploadInst = upload.render({
          elem: '#upload-btn'
          ,url: ctx + '/sysCommon/upload'
          ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                  $('#upload-img').attr('src', result); //图片链接（base64）
              });
          }
          ,done: function(res){
              if (res.code === 200) {
                  $("#avatar").val(res.data.url);
                  return layer.msg('上传成功');
              }
          }
          ,error: function(){
              //演示失败状态，并实现重传
            let uploadText = $('#upload-text');
              uploadText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              uploadText.find('.demo-reload').on('click', function(){
                  uploadInst.upload();
              });
          }
      });
      crud.setRadio("enabled","enabled","Y");
      crud.setRadio("sex","sex","0");
  });
  </script>
</body>
</html>